<!DOCTYPE html>
<!-- <html xmlns:th="http://www.thymeleaf.org"> -->
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="../js/layui/css/layui.css">
<script src="../js/layui/layui.all.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/layui-xtree/layui-xtree.js"></script>
<script type="text/javascript" src="../js/WebCalendar.js"></script>
</head>
<body>
<script type="text/javascript">
$(function (){
	jseach();
})
var tabobj;
 function jseach(){
	 layui.use(['form','laypage', 'layer', 'table', 'carousel', 'upload', 'element','slider'], function(){
		 
		  var laydate = layui.laydate //日期
		  ,laypage = layui.laypage //分页
		  layer = layui.layer //弹层
		  ,table = layui.table //表格
		  ,carousel = layui.carousel //轮播
		  ,upload = layui.upload //上传
		  ,form = layui.form
		  ,element = layui.element; //元素操作
		  var slider = layui.slider //滑块
		  var rname = $("#rname").val();
		  
		  
		//执行渲染
		tabobj =  table.render({
		    elem: '#roleid',//指定原始表格元素选择器（推荐id选择器）
		    toolbar:"#rdiv"
		    ,url:"getRolesByCondition"
		    ,method:'post',
		    page:true,
		    where:{
		    	name : rname
		    }
		    ,width:1690
		    ,height: 615 //容器高度
		    ,  cols:  [[ //标题栏
		        {checkbox: true,}
		        ,{field: 'id', title: 'ID', width: 160}
		        ,{field: 'name', title: '角色名', width: 100}
		        ,{fixed: 'right', width:300, align:'center', toolbar: '#barDemo'}
		      ]]
		  });
		
		});
 }
 var ids;
 var id;
 var xtree3;
 layui.use(["table","tree","form","layer"],function(){
	var table=layui.table;
	var form=layui.form;
	var layer=layui.layer;
	var tree=layui.tree;
	//监听工具条
	  table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	    var data = obj.data //获得当前行数据
	    ,layEvent = obj.event; //获得 lay-event 对应的值
	   id = data.id;
	    //var pa = "ysd123"
	    form.val("forms",data)
		if(layEvent === 'del'){
	      layer.confirm('真的删除该角色么', function(index){
	    	  layer.close(index);
	 		   $.ajax({
	 			   url:"deleteRole",
	 			   type:"post",
	 			   data:{
	 				   id:data.id
	 			   },
	 			   dataType:"json",
	 			   success:function(res){
	 				   if(res.success){
	 					  layer.msg(res.message)
	 		    			  tabobj.reload();
	 				   }else{
	 					  layer.msg(res.message)
	 		    			  tabobj.reload();
	 				   }
	 			   }
	 		   })
	      });
	    }else if(layEvent === 'edit'){
	    	layer.open({
				title:'修改角色',
				area:['400px','300px'],
				//closeBtn:0,
				type:1,
				content:$("#rupddiv"),
         		end : function(){
				//	alert("你点击了右上角的X");
 					$("#rupddiv").hide();
         		}
			})
	    } else if(layEvent === 'sez'){
	    	 layer.open({
         		 title:"正在设置"+data.name,
         		 type:1,
         		 area:['500px','300px'],
         		 content:$("#jeDiv"),
         		 end : function(){

         		   //alert("你点击了右上角的X");
				$("#jeDiv").hide();
         		}
         	 })
	    }
	    
	    
	    $.ajax({
			  type:"post",
			  url:"getZTreeNodes",
			  data:{
				  id:id
			  },
			  dataType:"json",
			
			  success:function(res){
			   layui.use(["tree","form"],function(){
					  var form = layui.form;
					   xtree3 = new layuiXtree({
				            elem: 'xtree3'                  //必填三兄弟之老大
				            , form: form                    //必填三兄弟之这才是真老大
				            , data: res     
				            , ckall: true    
				            , click: function (data) {
				            	ids="";
				            	
				            	var ocks=xtree3.GetChecked();
				            	
				            	
				            	if(ocks.length<0){
				            		alert("请选择要添加的角色");
				            		return ;
				            	}
				            	for(var i=0;i<ocks.length;i++){
				            		if(ids==""){
				            			ids+=ocks[i].value;
				            		}else{
				            			ids+=","+ocks[i].value;
				            		}
				            		
				            	}
				            	
				            } 
				        });

				  }) 
			  }
		  })
	    
	  });
})

        //添加模块保存
        function saveszModulesBtn(){
        	if(confirm("确认添加模块吗")){
        		 $.ajax({
        	        	type:"post",
        	        	url:"addMdulesssByRolesId",
        	        	data:{
        	        		roleId:id,
        				    moduleId:ids
        	        	},
        	        	dataType:"json",
        	        	success:function(res){
        	        		if(res.success){
        	        			alert(res.message);
        	        			window.location.reload();
        	        		}else{
        	        			alert(res.message);
        	        		}
        	        	}
        	        })
        	}
       
        }


function jaddseach(){
	layui.use(["layer"],function(){
		var layer=layui.layer;
		
			layer.open({
				title:'添加角色',
				area:['400px','300px'],
				type:1,
				//closeBtn:0,
				content:$("#radddiv"),
         		end : function(){
					//alert("你点击了右上角的X");
 					$("#radddiv").hide();
         		}
			})
	
	})
}
function chesrname (){
	var name = $("#name").val();
		$.ajax({
			   url:"checkrolesname",
				type:"post",
				data:{
					name : name
				},
				dataType:"json",
				success:function(res){
					if(res.success){
						 $("#rspan").html("")
						// return;
					}else{
						 //layer.msg("该角色名已存在，请重新输入");
					
						  layer.msg("该角色名已存在，请重新输入");
						 $("#loginName").val("");
						 $("#rspan").html("该角色名已存在，请重新输入")
					}
				} 
		   })
}
function chesrnames (){
	var name = $("#nname").val();
		$.ajax({
			   url:"checkrolesname",
				type:"post",
				data:{
					name : name
				},
				dataType:"json",
				success:function(res){
					if(res.success){
						 $("#rspan").html("")
						// return;
					}else{
						 //layer.msg("该角色名已存在，请重新输入");
					
						  layer.msg("该角色名已存在，请重新输入");
						 $("#loginName").val("");
						 $("#rspan").html("该角色名已存在，请重新输入")
					}
				} 
		   })
}
 function addrseachbtn(){
	layui.use(["layer"],function(){
		var layer=layui.layer;
		
		
	var name = $("#name").val();
	if(name == ""){
		//alert("请输入角色名")；
			layer.msg("请输入角色名")
			return;
		}
	$.ajax({
		   url:"saveRole",
			type:"post",
			data:{
				name : name
			},
			dataType:"json",
			success:function(res){
				if(res.success){
					 alert(res.message);
					//关闭layer
					 layer.close(layer.index);
					 $("#radddiv").hide();
					 window.location.reload();
				}else{
					 alert(res.message);
					 layer.close(layer.index);
					 tabobj.reload();
					 $("#radddiv").hide();
				}
			} 
	   })
	})
}
 function updrseachbtn(){
	 layui.use(["layer"],function(){
			var layer=layui.layer;
			
			
		var name = $("#nname").val();
		var id = $("#id").val();
		if(name == ""){
			//alert("请输入角色名")；
				layer.msg("请输入角色名")
				return;
			}
		$.ajax({
			   url:"updateRole",
				type:"post",
				data:{
					name : name,
					id : id
				},
				dataType:"json",
				success:function(res){
					if(res.success){
						 alert(res.message);
						//关闭layer
						 layer.close(layer.index);
						 tabobj.reload();
						 $("#rupddiv").hide();
					}else{
						 alert(res.message);
						 layer.close(layer.index);
						 tabobj.reload();
						 $("#rupddiv").hide();
					}
				} 
		   })
		})
 }
</script>
<script type="text/html" id="barDemo">

  
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="sez">设置</a>
</script>
<table id="roleid" lay-filter="demo"></table>
	<div id="rdiv" style="display: none;">
		<form class="layui-form"  id="seavhform">
			<div class="layui-form-item">
			<label class="layui-form-label">角色名</label>
			    <div class="layui-input-inline">
			      <input type="text" id="rname" lay-verify="title" autocomplete="off" placeholder="请输入角色名" class="layui-input">
			    </div>
			   <div class="layui-inline">
    				 <input type="button"  value="检索" class="layui-btn"  onclick="jseach()">
				      <input type="button"  value="添加" class="layui-btn"  onclick="jaddseach()">
			  </div>
			</div>

		</form>
	</div>
	
<!-- 添加窗体  -->
	<div id="radddiv" style="display: none;">
		<form class="layui-form"  id="addform">
		<div class="layui-form-item">
			    <label class="layui-form-label">请输入角色名</label>
			    <div class="layui-input-block">
			     	 <input type="text" id="name" name="name" autocomplete="off"  onblur="chesrname()"  placeholder="请输入角色名(必填)" class="layui-input">
			 	 </div>
			 	 <span id="rspan" style="font-style:background-color: red;"></span> 
			 	
 		 </div>
 		 <div class="layui-form-item">
		    <div class="layui-input-block">
		      <input type="button"  value="提交" class="layui-btn"  onclick="addrseachbtn()">
		      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
		    </div>
  		</div>
  		</form>
	</div>
	<!-- 修改窗体  -->
	<div id="rupddiv" style="display: none;">
		<form class="layui-form"  id="forms" lay-filter="forms" >
		<div class="layui-form-item">
		 <input type="hidden" id="id" name="id" autocomplete="off"  onblur="chesrname()"  placeholder="请输入角色名(必填)" class="layui-input">
			    <label class="layui-form-label">请输入角色名</label>
			    <div class="layui-input-block">
			     	 <input type="text" id="nname" name="name" autocomplete="off"  onblur="chesrnames()"  placeholder="请输入角色名(必填)" class="layui-input">
			 	 </div>
			 	 <span id="rspan" style="font-style:background-color: red;"></span> 
			 	
 		 </div>
 		 <div class="layui-form-item">
		    <div class="layui-input-block">
		      <input type="button"  value="提交" class="layui-btn"  onclick="updrseachbtn()">
		      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
		    </div>
  		</div>
  		</form>
	</div>
	
	<!-- 点击设置显示所有的模块 -->
<div id="jeDiv" style="display:none;">

<form class="layui-form">
<!-- <div id="xtree1" style="width:400px;border:1px solid black;padding: 10px 0 25px 5px;"></div> -->
<div id="xtree3" class="xtree_contianer"></div>
</form>

 <div class="layui-form-item" style="margin-top: 30px;">
    <div class="layui-input-block">
        <input class="layui-btn" type="button" value="提交" onclick="saveszModulesBtn()"></input>
    </div>
  </div>
</div>
</body>
</html>